<template>
  <div>
    <a-form
      :model="form"
      :rules="rules"
      :style="{ width: formConfig.width ? formConfig.width : '500px' }"
      ref="formRef"
      class="demo-form-inline"
      :layout="formConfig.formType"
    >
      <a-row v-if="formFields.length > 0" :gutter="rowConfig.gutter || 20">
        <a-col v-for="item in formFields" :span="item.span || 24">
          <a-form-item
            :label="item.label"
            :field="item.prop"
            :label-col-flex="item.labelCol != '' ? item.labelCol : '0px'"
            :hide-label="!item.isShow ? true : false"
            :hide-asterisk="!item.isShow ? true : false"
          >
            <!-- 输入框 -->
            <div v-if="item.type == 'input'" :style="{ width: item.width ? item.wdith : '100%' }">
              <a-input
                v-model="form[item.prop]"
                :default-value="form[item.defaultValue]"
                :placeholder="`${item.placeholder ? item.placeholder : '请输入' + item.label}`"
              />
              <!-- <span v-if="item.remark" class="remark">{{ item.remark }}</span> -->
            </div>
            <!-- 密码 -->
            <div
              v-if="item.type == 'password'"
              :style="{ width: item.width ? item.wdith : '100%' }"
            >
              <a-input-password
                v-model="form[item.prop]"
                :default-value="form[item.defaultValue]"
                :placeholder="`${item.placeholder ? item.placeholder : '请输入' + item.label}`"
                :style="{ width: item.width ? item.width + 'px' : '100%' }"
              />
            </div>

            <!-- 数字输入框 -->
            <div v-if="item.type == 'number'" :style="{ width: item.width ? item.wdith : '100%' }">
              <a-input-number
                v-model="form[item.prop]"
                :style="{ width: item.width || '100%' }"
                :size="item.size || 'large'"
                :placeholder="`请输入${item.label}`"
              />
            </div>
            <!-- 文本输入框 -->
            <div
              v-if="item.type == 'textarea'"
              :style="{ width: item.width ? item.wdith : '100%' }"
            >
              <a-textarea
                type="textarea"
                :style="{ width: item.width || '100%' }"
                v-model="form[item.prop]"
                :placeholder="`请输入${item.label}`"
                :auto-size="{ minRows: 2, maxRows: 5 }"
              />
            </div>
            <!-- 多选框 -->
            <div
              v-if="item.type == 'checkbox' && item.options && item.options.length > 0"
              :style="{ width: item.width ? item.wdith : '100%' }"
            >
              <a-checkbox-group :options="item.options" v-model:value="form[item.prop]">
              </a-checkbox-group>
            </div>
            <!-- 单选 -->
            <div
              v-if="item.type == 'radio' && item.options && item.options.length > 0"
              :style="{ width: item.width ? item.wdith : '100%' }"
            >
              <a-radio-group v-model="form[item.prop]">
                <a-radio
                  v-for="radio in item.options"
                  :value="radio.value"
                  :disabled="radio.disabled"
                  >{{ radio.label }}</a-radio
                >
              </a-radio-group>
              <span v-if="item.remark" class="remark">{{ item.remark }}</span>
            </div>
            <!-- 选择器 -->
            <div
              v-if="item.type == 'select' && item.options && item.options.length > 0"
              :style="{ width: item.width ? item.wdith : '100%' }"
            >
              <a-select
                v-model="form[item.prop]"
                :placeholder="`请选择${item.label}`"
                :style="{ width: item.width || '100%' }"
              >
                <a-option
                  v-for="option in item.options"
                  :key="option.value"
                  :value="option.value"
                  :disabled="item.disabled"
                  >{{ option.label }}</a-option
                >
              </a-select>
            </div>
            <!-- 开关 -->
            <div v-if="item.type == 'switch'" :style="{ width: item.width ? item.wdith : '100%' }">
              <a-switch
                v-model="form[item.prop]"
                :checked-value="item.active || 1"
                :unchecked-value="item.unActive || 0"
                :default-checked="item.defaultValue"
              />
            </div>
            <!-- 日期选择器 -->
            <div
              v-if="item.type == 'datePicker'"
              :style="{ width: item.width ? item.wdith : '100%' }"
            >
              <a-date-picker
                v-model="form[item.prop]"
                :style="{ width: item.width || '100%' }"
                :type="item.dataType || 'date'"
                :format="item.format || 'YYYY-MM-DD'"
                placeholder="请选择日期"
              />
            </div>
            <!-- 上传 -->
            <div v-if="item.type == 'upload'">
              <UploadFile :uploadConfig="item.uploadConfig" @uploadSuccess="uploadSuccess" />
            </div>
            <!-- 城市联动:https://www.npmjs.com/package/element-china-area-data?activeTab=readme -->
            <div
              v-if="item.type == 'cascader'"
              :style="{ width: item.width ? item.wdith : '100%' }"
            >
              <a-cascader
                :size="item.size || 'large'"
                :placeholder="`请选择${item.label}`"
                :style="{ width: item.width || '100%' }"
                v-model="form[item.prop]"
                :options="item.options"
              ></a-cascader>
            </div>
            <!-- 选择图标 -->
            <div
              class="icon_box"
              v-if="item.type == 'icon'"
              :style="{ width: item.width ? item.wdith : '100%' }"
            >
              <a-input
                v-model="form[item.prop]"
                :style="{ width: item.width || '100%' }"
                :disabled="item.disabled"
                :placeholder="item.placeholder || '点击选择图标'"
                allow-clear
              >
                <template #append>
                  <span class="iconfont icon-shezhi" @click="visible = true"></span>
                </template>
              </a-input>
            </div>
            <div
              v-if="item.type == 'treeSelect'"
              :style="{ width: item.width ? item.wdith : '100%' }"
            >
              <a-tree-select
                v-model="form[item.prop]"
                :style="{ width: item.width || '100%' }"
                :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                :placeholder="`${item.placeholder ? item.placeholder : '请选择' + item.label}`"
                allow-clear
                :data="item.treeData"
                :fieldNames="item.fieldNames || {}"
                :disabled="item.disabled == true ? item.disabled : false"
              >
              </a-tree-select>
            </div>
            <!-- 富文本 -->
            <div
              v-if="item.type == 'rick_text'"
              :style="{ width: item.width ? item.wdith : '100%' }"
            >
              <TinyMceEditor :modelValue="form[item.prop]" @updateContent="currentContent" />
              <!-- <UEditorDemo /> -->
            </div>
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <a-modal
      :visible="visible"
      :width="522"
      hide-title
      @ok="handleOk"
      @cancel=";(visible = false), (currentIcon = '')"
    >
      <div class="icon_box">
        <div
          class="icon_item"
          v-for="item in iconfontJson.glyphs"
          :class="`${currentIcon == item.font_class ? 'icon_active' : ''}`"
          @click="currentIcon = item.font_class"
        >
          <span :class="`iconfont icon-${item.font_class}`"></span>
          <p>{{ item.name }}</p>
          <p>icon_{{ item.font_class }}</p>
        </div>
      </div>
    </a-modal>
  </div>
</template>

<script setup>
import { reactive, ref, watch } from 'vue'
import iconfontJson from '../assets/font/iconfont.json'
import UploadFile from '@/components/UploadFile.vue'
import TinyMceEditor from './TinyMceEditor.vue'
import UEditorDemo from './UEditorDemo.vue'

import { Message } from '@arco-design/web-vue'

const form = ref({})
const formRef = ref(null)
//如果有树选择，存放展开的盒子
const treeExpandedKeys = ref([])
//存储图片
const props = defineProps({
  rowConfig: {
    type: Object,
    default: {
      gutter: 20
    }
  },
  formConfig: {
    type: Object,
    default: {
      width: '120px',
      formType: 'horizontal'
    }
  },
  formFields: {
    type: Array,
    default: () => []
  },
  rules: {
    type: Object,
    default: () => {}
  }
})

const visible = ref(false)
const currentIcon = ref('')
//设置传过来的表单信息，并设置验证
const init = () => {
  if (props.formFields.length > 0) {
    //给form设置字段，有默认值的设置默认值
    props.formFields.map((item) => {
      form.value[item.prop] =
        item.defaultValue !== '' && item.defaultValue !== undefined ? item.defaultValue : null
    })
  }
}
init()

//验证表单
const validateForm = () => {
  return formRef.value.validate()
}

//点击展开树选择
const handleExpand = (expandedKeys) => {
  treeExpandedKeys.value = expandedKeys
}

//选中图标
const handleOk = () => {
  props.formFields.map((item) => {
    if (item.type == 'icon') {
      form.value[item.prop] = 'icon-' + currentIcon.value
    }
  })
  currentIcon.value = ''
  visible.value = false
}

//内容
const currentContent = (val) => {
  props.formFields.map((item) => {
    if (item.type == 'rick_text') {
      form.value[item.prop] = val
    }
  })
}

//文件上传成功
const uploadSuccess = (fileInfo) => {
  if (fileInfo.data) {
    props.formFields.map((item) => {
      if (item.type == 'upload') {
        form.value[item.prop] = fileInfo.data.list.url
      }
    })
  } else {
    Message.error(fileInfo.msg)
  }
}

//重置表单
const resetForm = () => {
  formRef.value.resetFields()
}

watch(
  () => props.formFields,
  (val) => {
    init()
  },
  {
    immediate: true,
    deep: true
  }
)

//导出方法
defineExpose({
  validateForm,
  form,
  resetForm
})
</script>

<style lang="scss" scoped>
.avatar-uploader-icon {
  font-size: 30px;

  .iconfont {
    font-size: 30px;
  }
}

.alternative_icon {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.remark {
  margin-left: 10px;
  color: #999;
}

.icon-shezhi {
  cursor: pointer;
}

div.icon_box {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #eee;
  border-bottom: none;

  div.icon_item {
    width: 80px;
    height: 80px;
    padding: 10px;
    text-align: center;
    border-right: 1px solid #eee;
    border-bottom: 1px solid #eee;
    cursor: pointer;

    span {
      font-size: 24px;
    }

    p {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #999;
      font-size: 10px;
      line-height: 1.2;
    }
  }

  div.icon_item:nth-child(6n) {
    border-right: 0px solid #eee;
  }

  div.icon_item:hover {
    background-color: cornflowerblue;

    span {
      color: #fff;
    }

    p {
      color: #fff;
    }
  }

  div.icon_active {
    background-color: cornflowerblue;

    span {
      color: #fff;
    }

    p {
      color: #fff;
    }
  }
}
</style>
